<template>
  <view class="evaluate-box solid-bottom">
    <view class="padding-tb-sm flex justify-between align-center">
      <view class="flex">
        <view class="block-80">
          <image class="round" :src="prop.head_img" mode="aspectFill" lazy-load></image>
        </view>
        <view class="margin-left-sm flex flex-direction justify-between">
          <view class="text-df text-333">{{prop.user_nickname}}</view>
          <view class="text-sm text-999">{{prop.create_time}}</view>
        </view>
      </view>
      <view>
        <block v-for="(item,index) in 5" :key="index">
          <image class="block-24" :src="index+1 <= prop.star ?'/static/stard2.png':'/static/star2.png'"
            mode="aspectFill"></image>
        </block>
      </view>
    </view>
    <view class="padding-bottom-sm padding-top-sm text-df text-333 text-cut-english">{{prop.content}}</view>
    <view class="padding-top-xs padding-bottom-sm" >
      <view class="grid col-4">
        <block v-for="(ele,index) in prop.video" :key="index">
          <view class="padding-xs wrap-box" @tap="previewVideo(ele,index,'myVideo'+prop.id+index)">
            <view class="square-wrap">
              <view class="square-box">
                <image src="/static/empty/video2.png" lazy-load mode="aspectFill"></image>
                <video :src="ele" class="video" style="display:none" :id='"myVideo"+prop.id+index' @fullscreenchange='fullscreenchange'></video>
              </view>
            </view>
          </view>
        </block>
        <block v-for="(ele,index) in prop.thumb" :key="index">
          <view class="padding-xs wrap-box" @tap="preview(ele,index)">
            <view class="square-wrap">
              <view class="square-box">
                <image :src="ele" lazy-load mode="aspectFill"></image>
              </view>
            </view>
          </view>
        </block>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      prop:{
        type:Object,
        required:true,
      }
    },
    data() {
      return {
        temp:''
      }
    },
    methods: {
      preview(item, index) {
        uni.previewImage({
          current: index,
          urls: this.prop.thumb,
        });
      },
      previewVideo(j,index,el) {
        console.log(j,index,el)
         // 获取 video 上下文 videoContext 对象
          this.temp =el
          this.videoContext = uni.createVideoContext(el);
          // 进入全屏状态
          this.videoContext.requestFullScreen(0);
          setTimeout(function(){
            uni.createVideoContext(el).play(); //开始视频播放事件
          },500)
      },
      // 退出全屏时视频暂停
      fullscreenchange(){
        let temp = this.temp
        uni.createVideoContext(temp).pause(); //暂停视频播放事件
        uni.createVideoContext(temp).seek(0);
      }
    },
  }
</script>

<style lang="scss" scoped>
  .wrap-box {
    background-color: #FFFFFF;

    .square-wrap {
      width: 100%;
      height: 0;
      padding-bottom: 100%;
      box-sizing: border-box;
      position: relative;

      .square-box {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        // width: 100%;
        // height: 100%;
        border-radius: 8rpx;

        image {
          width: 100%;
          height: 100%;
          border-radius: 8rpx;
        }
      }
    }
  }


  .block-80 {
    width: 80rpx;
    height: 80rpx;
    min-width: 80rpx;
    min-height: 80rpx;
    background-color: #EEEEEE;
    border-radius: 50%;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .block-24 {
    width: 24rpx;
    height: 24rpx;
    min-width: 24rpx;
    min-height: 24rpx;
  }

  .text-333 {
    color: #333333;
  }

  .text-999 {
    color: #999999;
  }

  .text-cut-english {
    word-wrap: break-word;
    white-space: normal;
    word-break: break-all;
  }

  /* 300*225 */
  .grid-video image {
    width: 150rpx;
    height: 112rpx;
  }
</style>
